<template>
  <div
    class="container flex flex-col bg-no-repeat bg-contain back-image"
    ref="self"
  >
    <div class="mt-[95px] w-full h-[100px] bg-transparent px-[25px]">
      <div class="text-xl font-bold tracking-[1px]">理货类型选择</div>
      <div class="text-sm mt-[3px]">按照作业方式选择合适的理货类型</div>
    </div>
    <div class="container h-full bg-transparent px-[10px]">
      <div class="flex-col flex w-full h-full">
        <div class="flex flex-col w-full flex-1">
          <div class="flex h-[210px]">
            <div
              @click="goToTally('/one-stock-tally-batch')"
              class="flex flex-1 bg-no-repeat bg-cover ost-image relative"
            >
              <div
                class="w-[100px] absolute font-bold"
                style="top: 30px; left: 25px"
              >
                <div>入库、出库</div>
                <div>直接作业</div>
              </div>
            </div>
            <div
              @click="goToTally('/two-stock-tally')"
              class="flex flex-1 bg-no-repeat bg-cover tst-image relative"
            >
              <div
                class="w-[75px] absolute font-bold"
                style="top: 30px; left: 25px"
              >
                <div>杂作业</div>
                <div>转配</div>
              </div>
            </div>
          </div>
          <div class="flex h-[210px]">
            <div
              @click="goToTally('/bulk-tally')"
              class="flex flex-1 bg-no-repeat bg-cover bulk-image relative"
            >
              <div
                class="w-[100px] absolute font-bold"
                style="top: 30px; left: 25px"
              >
                散货外捣
              </div>
            </div>
            <div
              @click="goToTally('/tally-history')"
              class="flex flex-1 bg-no-repeat bg-cover history-image relative"
            >
              <div
                class="w-[100px] absolute font-bold"
                style="top: 30px; left: 25px"
              >
                理货历史
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <yard-map-v2 :positionInfo="positionInfo"></yard-map-v2>-->
  </div>
</template>
<script setup lang="ts" name="TallyTypeSelect">
import router from "@/router";
import { ref } from "vue";
import YardMapV2 from "@/components/TallyType/YardMapV2.vue";
function goToTally(url: string) {
  router.push(url);
}

const positionInfo = {
  areaId: "1475297948189388802",
  code: "XQ-01",
  id: "1727192439797993472",
  name: "西前1场"
}
</script>
<style scoped>

.back-image {
  background-image: url("../../assets/main-back.png");
}
.ost-image {
  background-image: url("../../assets/ost-back.png");
}
.tst-image {
  background-image: url("../../assets/tst-back.png");
}
.bulk-image {
  background-image: url("../../assets/bulk-back.png");
}
.history-image {
  background-image: url("../../assets/tally-history-back.png");
}
</style>
